<template lang='pug'>
.step-box
  div.step-topper
    StepItem.step-item(
      v-bind="$attrs"
      :stepList="stepList"
      :step="currentIndex")
  div.step-content
    transition(mode="out-in")
      //- If not show component and destroy it in each step change
      component(v-if="stepList[currentStep.index].component"
        :is="stepList[currentStep.index].component"
        :current-step="currentStep"
        v-bind="$attrs"
        v-on="$listeners"
        @can-continue="proceed"
        @change-next="changeNextBtnValue")
      template(v-else)
        slot(:name="currentStep.name")
  div.step-footer(v-if="hasFooter")
    ButtonList(:buttonList="stepListButtons")
</template>

<script>
/**
 * @name stepPage
 * @author linmn
 */
import ButtonList from '@/components/ButtonList'
import StepItem from '@/components/Step/StepItem'
export default {
  name: 'StepPage',
  components: {
    ButtonList,
    StepItem
  },
  data () {
    return {
      currentStep: {}, // 当前节点配置对象
      currentIndex: this.actIndex,
      previousStep: {}, // 前一个节点配置
      nextButton: {},
      canContinue: false, // 是否允许跳转下个节点
      canBack: false, // 是否允许返回上一个节点
      finalStep: false, // 是否到结束节点
      stepButtonList: [] // 节点操作
    }
  },
  watch: {
    actIndex (index) {
      this.currentIndex = index
    }
  },
  props: {
    stepList: {
      type: Array,
      default: () => []
    },
    hasFooter: {
      type: Boolean,
      default: true
    },
    actIndex: {
      type: Number,
      default: 0
    } // 当前活动的step节点索引
  },
  computed: {
    stepListButtons () {
      const that = this
      return [{
        label: 'back',
        type: 'default',
        func: ({funcProps}) => {
          this.backStep()
        },
        isShow: () => {
          return that.currentIndex > 0
        }
      }, ...this.stepButtonList, {
        label: 'next',
        type: 'info',
        func: ({funcProps}) => {
          // const {button} = funcProps
          // this.$set(button, 'disabled', !that.stepList[this.currentIndex].canContinue)
          this.nextStep()
        },
        isShow () {
          return that.currentIndex + 1 !== that.stepList.length
        }
      }]
    }
  },
  created () {
    this.activateStep(this.currentIndex)
  },
  methods: {
    activateStep  (index, back = false) {
      this.$emit('active-step', index)
      if (!this.stepList[index]) return
      this.previousStep = this.currentStep
      this.currentIndex = index
      this.currentStep = {
        ...this.stepList[index],
        index: index
      }
      this.finalStep = index + 1 === this.stepList.length
      // 每个不同节点的操作按钮
      this.stepButtonList = this.returnActiveButtonList(index)
      // 结束节点
      if (!back) {
        this.$emit('completed-step', this.previousStep)
      }
    },
    returnActiveButtonList (index) {
      return this.stepList[index].buttonList || []
    },
    nextStep (accept) {
      // this.nextButton[this.currentStep.name] = true
      if (accept) this.canContinue = true
      // console.log('is finalStep ---', this.finalStep)
      if (this.finalStep) {
        this.$emit('stepper-finished', this.currentStep)
      }
      if (this.canContinue) {
        const currentIndex = this.currentStep.index + 1
        this.activateStep(currentIndex)
      }
      this.canContinue = false
      this.$forceUpdate()
    },
    backStep () {
      this.$emit('clicking-back')
      const currentIndex = this.currentStep.index - 1
      if (currentIndex >= 0) {
        this.activateStep(currentIndex, true)
      }
    },
    changeNextBtnValue () {
      this.$emit('acceptNext')
      // this.nextButton[this.currentStep.name] = payload.nextBtnValue
      this.nextStep()
      this.$forceUpdate()
    },
    proceed (payload) {
      this.canContinue = payload.value
    },
    resetStep () {
      this.activateStep(0)
    }
  }
}
</script>

<style lang='sass' scoped>
.step-topper
  background: #fff
  display: flex
  justify-content: center
.step-footer
  margin: 20px 0
  text-align: center
.step-item
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
</style>
